<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="searchForm"
				class="flex-warp-container"
				:inline="true"
				:model="queryData"
				label-width="77px"
				size="medium"
				@submit.native.prevent
			>
				<el-form-item
					:label="$t('game.venue_access_manage.venue_type') + ':'"
					prop="venueType"
				>
					<el-select
						v-model="queryData.venueType"
						clearable
						:placeholder="$t('common.all')"
						style="width:210px"
						:popper-append-to-body="false"
					>
						<el-option key="all" :value="undefined">
							{{ $t('common.all') }}
						</el-option>
						<el-option
							v-for="item in bwVenueTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('game.venue_name') + ':'"
					prop="venueName"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.venueName"
						clearable
						size="medium"
						style="width: 280px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
					></el-input>
				</el-form-item>
				<el-form-item style="margin-left: 30px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					align="center"
					type="index"
					:label="$t('common.serial_number')"
				></el-table-column>
				<el-table-column
					prop="venueTypeName"
					align="center"
					:label="$t('game.venue_access_manage.venue_type')"
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.venueType, 'bwVenueTypeList') }}
					</template>
				</el-table-column>
				<el-table-column
					prop="venueName"
					align="center"
					:label="$t('game.venue_name')"
				>
					<template slot-scope="scope">
						{{ scope.row[getKey('venueName')] }}
					</template>
				</el-table-column>
				<el-table-column
					prop="currencyTypes"
					align="center"
					:label="$t('game.venue_access_manage.currency')"
				>
					USDT
					<!--<template slot-scope="scope">
						USDT
						 <span
							v-for="(item, index) in scope.row.currencyTypesList"
							:key="index"
						>
							{{ typeFilter(item, 'currency') }}
						</span>
					</template>-->
				</el-table-column>
				<el-table-column
					prop="languageTypes"
					align="center"
					:label="$t('game.venue_access_manage.language')"
				>
					<template slot-scope="scope">
						<span
							v-for="(item, index) in scope.row.languageTypesList"
							:key="index"
						>
							{{ typeFilter(item, 'language') }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					align="center"
					:label="$t('game.venue_access_manage.distribute_merchant')"
				>
					<template slot-scope="scope">
						<el-popover
							placement="right"
							width="300"
							trigger="hover"
						>
							<el-table :data="scope.row.usedMerchantList">
								<el-table-column
									width="100"
									type="index"
									:label="$t('common.serial_number')"
									align="center"
								></el-table-column>
								<el-table-column
									align="center"
									width="150"
									property="name"
									:label="
										$t(
											'game.venue_access_manage.merchant_name'
										)
									"
								>
									<template slot-scope="rowScope">
										{{ rowScope.row }}
									</template>
								</el-table-column>
							</el-table>
							<el-link slot="reference" type="primary">
								{{ scope.row.usedMerchantList.length }}
							</el-link>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column
					prop="remark"
					align="center"
					show-overflow-tooltip
					:label="$t('game.venue_access_manage.remark_info')"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.remark || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					:label="$t('common.createBy')"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('common.createAt')"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedBy"
					align="center"
					:label="$t('common.last_updateBy')"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					:label="$t('common.last_updateAt')"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					align="center"
					:label="$t('common.actions')"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('301031')"
							type="primary"
							@click="edit(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:total="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="$t('common.edit')"
			:visible.sync="addVisible"
			:width="getWidth('900px')"
		>
			<el-form
				ref="addForm"
				label-width="120px"
				:model="addFormData"
				@submit.native.prevent
			>
				<el-form-item
					class="boxstly"
					:label="$t('game.venue_name') + ':'"
					prop="venueName"
					:rules="[
						{
							required: true,
							message: $t(
								'game.game_betslip.input_tips1_venueName'
							),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="addFormData.venueName"
						clearable
						size="medium"
						style="width: 210px"
						:placeholder="$t('common.please_enter')"
						maxlength="20"
						:disabled="!!rowData"
					/>
				</el-form-item>
				<!-- <el-form-item
					:label="$t('game.venue_name') + ':'"
					prop="venueName"
				>
				</el-form-item> -->
				<!-- 	<el-row>
					<el-col :span="12">
						<el-form-item
							class="boxstly"
							:label="`${$t('common.zh')}: `"
							prop="venueName"
							:rules="[
								{
									required: true,
									message: $t(
										'game.game_betslip.input_tips1_venueName'
									),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model="addFormData.venueName"
								clearable
								size="medium"
								style="width: 210px"
								:placeholder="$t('common.please_enter')"
								maxlength="20"
								:disabled="loading"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							class="boxstly"
							:label="`${$t('common.en')}: `"
							prop="venueEnName"
							:rules="[
								{
									required: true,
									message: $t(
										'game.game_betslip.input_tips1_venueEnName'
									),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model="addFormData.venueEnName"
								clearable
								size="medium"
								style="width: 210px"
								:placeholder="$t('common.please_enter')"
								maxlength="20"
								:disabled="loading"
							/>
						</el-form-item>
					</el-col>
				</el-row>-->
				<!-- <el-row>
						<el-col :span="12">
							<el-form-item
								class="boxstly"
								:label="`${$t('common.th')}: `"
								prop="venueThName"
								:rules="[
									{
										required: true,
										message: $t(
											'game.game_betslip.input_tips1_venueThName'
										),
										trigger: 'blur'
									}
								]"
							>
								<el-input
									v-model="addFormData.venueThName"
									clearable
									size="medium"
									style="width: 210px"
									:placeholder="$t('common.please_enter')"
									maxlength="20"
									:disabled="loading"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item
								class="boxstly"
								:label="`${$t('common.vn')}: `"
								prop="venueVnName"
								:rules="[
									{
										required: true,
										message: $t(
											'game.game_betslip.input_tips1_venueVnName'
										),
										trigger: 'blur'
									}
								]"
							>
								<el-input
									v-model="addFormData.venueVnName"
									clearable
									size="medium"
									style="width: 210px"
									:placeholder="$t('common.please_enter')"
									maxlength="20"
									:disabled="loading"
								/>
							</el-form-item>
						</el-col>
					</el-row> -->
				<el-form-item
					:label="$t('game.venue_access_manage.venue_type') + ':'"
					prop="venueType"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_choose') +
								$t('game.venue_access_manage.venue_type'),
							trigger: 'blur'
						}
					]"
				>
					<el-select
						v-model="addFormData.venueType"
						clearable
						:placeholder="$t('common.all')"
						style="width:210px"
						:popper-append-to-body="false"
						:disabled="!!rowData"
					>
						<el-option
							v-for="item in bwVenueTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('game.venue_access_manage.currency') + ':'"
					prop="currencyTypes"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_choose') +
								$t('game.venue_access_manage.currency'),
							trigger: 'blur'
						}
					]"
				>
					<el-checkbox-group v-model="addFormData.currencyTypes">
						<el-checkbox
							v-for="(item, index) in currencyList"
							:key="index"
							:label="item.code"
						>
							{{ item.description }}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item
					:label="$t('game.venue_access_manage.support_language')"
					prop="languageTypes"
					:rules="[
						{
							required: true,
							type: 'array',
							message:
								$t('common.please_choose') +
								$t('game.venue_access_manage.language'),
							trigger: 'blur'
						}
					]"
				>
					<el-checkbox-group v-model="addFormData.languageTypes">
						<el-checkbox
							v-for="(item, index) in languageList"
							:key="index"
							:label="item.code"
						>
							{{ item.description }}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item
					:label="$t('game.venue_access_manage.remark_info') + ':'"
					prop="remark"
				>
					<el-input
						v-model="addFormData.remark"
						clearable
						size="medium"
						style="width: 210px"
						:placeholder="$t('common.remark')"
						:disabled="loading"
						maxlength="500"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="submit()" :loading="loading">
					{{ $t('common.confirm') }}
				</el-button>
			</span>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { venueAccessList, venueAccessEdit } from '@/api/game'
import MainContent from '@/components/MainContent/index.vue'
export default {
	name: routerNames.venueAccessManage,
	components: { MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				venueName: '',
				venueType: undefined
			},
			tableData: [],
			addVisible: false,
			addFormData: {
				currencyTypes: [],
				languageTypes: [],
				venueName: '',
				venueThName: '',
				venueVnName: '',
				venueEnName: '',
				venueType: undefined,
				remark: ''
			},
			rowData: {},
			loading: false,
			pageNum: 1,
			pageSize: 100,
			total: 0
		}
	},
	computed: {
		// 场馆类型
		bwVenueTypeList() {
			return this.globalDics.bwVenueTypeList || []
		},
		// 币种
		currencyList() {
			// 一期只支持USDT 暂时写死
			return [
				{
					code: 'USDT',
					description: 'USDT'
				}
			]
			// if (this?.globalDics?.currency?.[0]) {
			// 	return [this.globalDics.currency[0]]
			// }
		},
		// 支持语言
		languageList() {
			if (this?.globalDics?.language) {
				return this.globalDics.language.filter(
					(item) => item.code === 'zh_CN'
				)
			}
			return []
		}
	},
	created() {
		this.loadData()
	},
	methods: {
		reset() {
			this.$refs.searchForm.resetFields()
			this.loadData()
		},
		loadData() {
			this.loading = true
			const params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.queryData
			}
			for (const k in params) {
				if (params[k] === '' || params[k] === undefined) {
					delete params[k]
				}
			}
			venueAccessList(params).then((res) => {
				this.loading = false
				this.tableData = res.data.record
				this.total = res.data.totalRecord
			})
		},
		// 分页
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		// 分页
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		// 提交
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					this.loading = true
					const params = {
						...this.addFormData,
						venueId: this.rowData.venueId
					}
					venueAccessEdit(params)
						.then((res) => {
							if (res.code !== 200) {
								return this.$message.error(res.msg)
							}
							this.loading = false
							this.addVisible = false
							this.loadData()
							this.$message.success(
								this.$t('common.action_success')
							)
						})
						.catch(() => {
							this.loading = false
						})
				}
			})
		},
		// 编辑
		edit(row) {
			this.addVisible = true
			this.rowData = row
			this.addFormData = { ...row }
			for (const k in this.addFormData) {
				this.addFormData[k] = row[k]
				// if (['currencyTypes', 'languageTypes'].includes(k)) {
				// 	this.addFormData[k] = row[k].split(',')
				// }
			}
			this.addFormData['currencyTypes'] = ['USDT']
			this.addFormData['languageTypes'] = ['zh_CN']
			// 一期只支持中文和人民币
			if (this.addFormData?.currencyTypes?.includes('USDT')) {
				this.addFormData.currencyTypes = ['USDT']
			} else {
				this.addFormData.currencyTypes = []
			}

			if (
				this.addFormData.languageTypes?.includes('zh_CN') ||
				this.addFormData.languageTypes?.includes('ZH')
			) {
				this.addFormData.languageTypes = ['zh_CN']
			} else {
				this.addFormData.languageTypes = []
			}

			this.$nextTick(() => {
				this.$refs.addForm.clearValidate()
			})
		}
	}
}
</script>

<style lang="scss" scoped></style>
